<template>
  <div class="ele-icon">
    <a :href="href">
      <svg class="icon" aria-hidden="true">
        <use :xlink:href="svgPath"></use>
      </svg>
      <p>{{EleName}}</p>      
    </a>
  </div>
</template>


<script>
export default {
  name: "EleIcon",
  props: {
    IconName: {
      type: String,
      required: true
    },
    EleName: {
      type: String,
      required: true
    },
    href: String
  },
  data() {
    return {

    };
  },
  computed: {
    svgPath() {
      return '#' + this.IconName;
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="scss">
  .ele-icon {
    width: 112px;
    height: 112px;
    margin: 8px;

    svg {
      font-size: 32px;
    }

    a {
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      color: white;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba($color: #3e3e3e, $alpha: 0.7) ;
      transition: box-shadow ease-in-out .2s, background-color ease-in-out .2s, transform ease-in-out .2s;
      border: solid 3px#464646;
      

      p {
        font-size: 14px;
      }

      &:hover {
        background-color: cadetblue;
        box-shadow:
          0 0 0 2.5px  #0169aa,
          0 0 0 3px rgb(0, 132, 255);
        transform: translateY(-10px);
        border: solid 3px #0169aa00;
      }
    }

    
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>


